import Node from '@/core/Node';
import ResizeDragableLayer from '@/layer/ResizeDragableLayer';
let components = {};
function registerComponent(name, plugin) {
    components[name] = plugin;
}

function getComponents() {
    const comps = [];
    for (let key in components) {
        comps.push(components[key]);
    }
    return comps;
}

function getComponent(canvas, name) {
    const component = components[name];
    const { getEntity, defaultStyle = {} } = component;
    const wrapper = new ResizeDragableLayer(canvas, {
        width: defaultStyle.width || '200px',
        height: defaultStyle.height || '80px',
        position: 'absolute',
        left: defaultStyle.left || '30px',
        bottom: defaultStyle.bottom || '300px',
    });
    if (getEntity) {
        const entity = getEntity(canvas, defaultStyle);
        const style = extend({}, defaultStyle);
        delete style.width;
        delete style.height;
        delete style.left;
        delete style.bottom;
        console.log('entity===>', entity);
        extend(entity, style);
        wrapper.appendChild(entity);
        return wrapper;
    }
    const node = new Node(canvas, defaultStyle);
    wrapper.appendChild(node);
    return wrapper;
}

function extend(target, source) {
    const keys = Object.keys(source);
    for (let key of keys) {
        if (key !== 'childs' && source[key] instanceof Array) {
            target[key] = source[key];
            continue;
        }
        if (typeof source[key] !== 'object') {
            target[key] = source[key];
        }
    }
    return target;
}

export default { getComponent, getComponents, registerComponent, extend };
